<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 语音状态
const isListening = ref(false)
const voiceText = ref('')
const voiceVolume = ref(0)

// 命令列表
const commands = ref([
  {
    type: 'music',
    icon: '🎵',
    text: '播放音乐',
    examples: ['播放周杰伦的歌', '下一首', '调高音量']
  },
  {
    type: 'scene',
    icon: '🎭',
    text: '场景控制',
    examples: ['打开睡眠模式', '开启派对模式', '关闭所有灯光']
  },
  {
    type: 'device',
    icon: '🔌',
    text: '设备控制',
    examples: ['打开客厅灯', '调高空调温度', '关闭电视']
  },
  {
    type: 'query',
    icon: '❓',
    text: '信息查询',
    examples: ['今天天气怎么样', '现在几点了', '明天有什么日程']
  }
])

// 语音历史
const voiceHistory = ref([
  {
    id: 1,
    time: '10:30',
    type: 'user',
    text: '播放周杰伦的歌'
  },
  {
    id: 2,
    time: '10:30',
    type: 'assistant',
    text: '好的,为您播放周杰伦的歌曲'
  },
  {
    id: 3,
    time: '10:35',
    type: 'user',
    text: '调高音量'
  },
  {
    id: 4,
    time: '10:35',
    type: 'assistant',
    text: '已将音量调至80%'
  }
])

// 开始语音识别
const startListening = () => {
  isListening.value = true
  // 模拟音量变化
  const volumeInterval = setInterval(() => {
    voiceVolume.value = Math.random() * 100
  }, 100)

  // 模拟5秒后识别完成
  setTimeout(() => {
    clearInterval(volumeInterval)
    isListening.value = false
    voiceVolume.value = 0
    
    const text = '播放我喜欢的歌单'
    voiceText.value = text
    
    // 添加到历史记录
    voiceHistory.value.push({
      id: Date.now(),
      time: new Date().toLocaleTimeString('zh-CN', { 
        hour: '2-digit', 
        minute: '2-digit' 
      }),
      type: 'user',
      text
    })
    
    // 模拟助手回复
    setTimeout(() => {
      voiceHistory.value.push({
        id: Date.now() + 1,
        time: new Date().toLocaleTimeString('zh-CN', { 
          hour: '2-digit', 
          minute: '2-digit' 
        }),
        type: 'assistant',
        text: '好的,为您播放您喜欢的歌单'
      })
    }, 500)
  }, 5000)
}

// 清空历史
const clearHistory = () => {
  if (confirm('确定要清空历史记录吗？')) {
    voiceHistory.value = []
  }
}
</script>

<template>
  <div class="voice-page">
    <!-- 语音识别区域 -->
    <div class="voice-section">
      <div 
        class="voice-button"
        :class="{ listening: isListening }"
        @click="startListening"
      >
        <div class="button-content">
          <span class="mic-icon">🎙️</span>
          <span class="button-text">
            {{ isListening ? '正在聆听...' : '按住说话' }}
          </span>
        </div>
        <div 
          v-if="isListening"
          class="voice-waves"
        >
          <div 
            v-for="i in 5"
            :key="i"
            class="wave"
            :style="{ height: `${voiceVolume}%` }"
          ></div>
        </div>
      </div>
      <div 
        v-if="voiceText"
        class="voice-text"
      >
        "{{ voiceText }}"
      </div>
    </div>

    <!-- 命令提示 -->
    <div class="commands-section">
      <h2>语音命令示例</h2>
      <div class="commands-grid">
        <div 
          v-for="command in commands"
          :key="command.type"
          class="command-card"
        >
          <div class="card-header">
            <span class="command-icon">{{ command.icon }}</span>
            <h3>{{ command.text }}</h3>
          </div>
          <div class="examples-list">
            <div 
              v-for="(example, index) in command.examples"
              :key="index"
              class="example-item"
            >
              "{{ example }}"
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 历史记录 -->
    <div class="history-section">
      <div class="section-header">
        <h2>对话历史</h2>
        <button 
          class="clear-btn"
          @click="clearHistory"
        >
          清空历史
        </button>
      </div>
      <div class="history-list">
        <div 
          v-for="message in voiceHistory"
          :key="message.id"
          class="message"
          :class="message.type"
        >
          <div class="message-content">
            <span class="message-icon">
              {{ message.type === 'user' ? '🗣️' : '🤖' }}
            </span>
            <div class="message-text">{{ message.text }}</div>
          </div>
          <div class="message-time">{{ message.time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.voice-page {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* 语音识别区域样式 */
.voice-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.voice-button {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.voice-button:hover {
  transform: scale(1.05);
}

.voice-button.listening {
  animation: pulse 2s infinite;
}

.button-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  z-index: 1;
}

.mic-icon {
  font-size: 3rem;
}

.button-text {
  font-size: 1.1rem;
  font-weight: 500;
}

.voice-waves {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  height: 40px;
  align-items: flex-end;
}

.wave {
  width: 4px;
  background-color: var(--text-light);
  border-radius: 2px;
  transition: height 0.1s ease;
}

.voice-text {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-light);
  text-align: center;
}

/* 命令提示样式 */
.commands-section {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 2rem;
}

.commands-section h2 {
  margin: 0;
  margin-bottom: 1.5rem;
  color: var(--text-gray);
}

.commands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.command-card {
  background-color: var(--bg-dark);
  border-radius: 12px;
  padding: 1.5rem;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.command-icon {
  font-size: 2rem;
}

.card-header h3 {
  margin: 0;
}

.examples-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.example-item {
  color: var(--text-gray);
  font-size: 0.9rem;
}

/* 历史记录样式 */
.history-section {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 2rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.section-header h2 {
  margin: 0;
  color: var(--text-gray);
}

.clear-btn {
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid var(--text-gray);
  color: var(--text-gray);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-btn:hover {
  border-color: var(--error-color);
  color: var(--error-color);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.message {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--bg-dark);
  border-radius: 12px;
}

.message.assistant {
  background-color: rgba(98, 0, 234, 0.1);
}

.message-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
}

.message-icon {
  font-size: 1.2rem;
}

.message-text {
  line-height: 1.5;
}

.message-time {
  color: var(--text-gray);
  font-size: 0.9rem;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(98, 0, 234, 0.4); }
  70% { box-shadow: 0 0 0 20px rgba(98, 0, 234, 0); }
  100% { box-shadow: 0 0 0 0 rgba(98, 0, 234, 0); }
}

@media (max-width: 768px) {
  .voice-button {
    width: 150px;
    height: 150px;
  }

  .mic-icon {
    font-size: 2rem;
  }

  .voice-text {
    font-size: 1.2rem;
  }

  .commands-grid {
    grid-template-columns: 1fr;
  }
}
</style>